<template>
	<div class='x-container'>
		<div class="x-list">附件列表</div>
		<div class="x-nav logo">
			<el-tabs tab-position="left" style="height:calc(100vh - 220px)">
				<el-tab-pane label="实施方案">
					<implementationPlan></implementationPlan>
				</el-tab-pane>
				<el-tab-pane label="实施方案预算">实施方案预算</el-tab-pane>
				<el-tab-pane label="入库核查备案申请表">入库核查备案申请表</el-tab-pane>
				<el-tab-pane label="林业证明">林业证明</el-tab-pane>
				<el-tab-pane label="评审意见书">评审意见书</el-tab-pane>
				<el-tab-pane label="耕地质量等级...意见书">耕地质量等级...意见书</el-tab-pane>
				<el-tab-pane label="踏勘选址报告">踏勘选址报告</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script>
	import implementationPlan from "./attachments/implementationPlan.vue"
	export default {
		data() {
			return {
				
			}
		},
		components:{
			implementationPlan,
		},
		methods:{
			//获取指定元素到页面顶部距离
			getElementPosition:function (e) {
			  var y = 0;
			  while (e !== null)  {
			    y += e.offsetTop;
			    e = e.offsetParent;
			  }
			  return y;
			}
		},
		mounted(){
			this.$nextTick(() => {
				let xNav = document.getElementsByClassName('x-nav')[0];
				let top = this.getElementPosition(xNav);
				let top1 = xNav.getBoundingClientRect().top;
				console.log(top,top1);
			})
		}
	}
</script>

<style lang="scss" scoped>
	.x-nav.logo /deep/ .el-tabs__item.is-active{
		background-color: rgba(0,0,0,.06);
	}
	.x-nav.logo /deep/ .el-tabs__nav-wrap.is-left:after{
		display: none;
	}
</style>

<style scoped lang="scss">
	.x-container{
		.x-list{
			width:177px;
			padding:10px;
			background:rgba(249,250,252,1);
			text-align: center;
			border-bottom: 1px solid rgba(0,0,0,.05);
		};
		.x-nav{
			position: relative;
		}
		.x-nav:before{
			content:"";
			display:block;
			width:177px;
			height:619px;
			background:rgba(249,250,252,1);
			position: absolute;
			left:0;
			top:0;
		}
	}
</style>
